import React, { Component } from 'react';
import { BrowserRouter as Router, Route,Link,Redirect} from "react-router-dom";
import Main from './Main'
import {API_Login} from '../API'
import 'antd/dist/antd.css'
import {postAxios} from '../api/axios'
import store from '../store/index'
import { actionT} from '../store/actionTypes'
import {changeInputAction,getTodoList} from '../store/actionCreators'
import { Layout, Menu, Dropdown, Form, Icon, Input, Button, Checkbox, message } from 'antd';
const { Header, Content, Footer } = Layout;
const menu = (
    <Menu>
        <Menu.Item>
            <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
                English
        </a>
        </Menu.Item>
        <Menu.Item>
            <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
                繁体中文
        </a>
        </Menu.Item>
    </Menu>
);

class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            userName:'',
            passWord:'',
            isLoading:false
        }
        // this.state=store.getState();//从store获取数据
        // store.subscribe(this.storeChange.bind(this)) //监听store数据更新时执行storeChange方法-订阅模式
    }
    login(){
        let self=this;
        this.setState({ isLoading: true });
        localStorage.setItem("token",null);
    //    return
       let data = {
           lang:'cn',
           timeZoneSecond : (new Date().getTimezoneOffset() / 60) * (-1) * 360,
           name:this.state.userName,
           password:this.state.passWord
        }
        postAxios(API_Login,data).then((res)=>{
            self.setState({ isLoading: false });
                if(res.ret==1 && res.data.token){
                    console.log('存token')
                    localStorage.setItem("token",res.data.token);
                    const action ={
                        type:actionT.setToken,
                        value:res.data.token
                    }
                    store.dispatch(action)  //传递action
                }
                if(res.ret==1){
                    this.props.history.push("/main/");   //重定向
                }else{
                    
                }
            },(error)=>{
                self.setState({ isLoading: false });
                
                console.log('error',error)
            })
    }
    render() {
        return (
            <Layout>
                <Header>
                    <div className="logo" />
                    <Menu
                        theme="dark"
                        mode="horizontal"
                        // defaultSelectedKeys={['2']}
                        style={{ lineHeight: '64px', float: 'right' }}
                    >
                        <Menu.Item key="2">API</Menu.Item>
                        <Menu.Item key="3">
                            <Dropdown overlay={menu}>
                                <a className="ant-dropdown-link" href="#">
                                    简体中文 <Icon type="down" />
                                </a>
                            </Dropdown>
                        </Menu.Item>
                    </Menu>
                </Header>
                <Content className="loginBg">
                    <Form className="login-form" style={{margin:'200px auto 0',background:'rgba(255,255,255,1)',padding:'50px',borderRadius:'6px'}}>
                        <Form.Item>
                            <Input
                                prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                placeholder="Username"
                                // value={this.state.userName}
                                onChange={this.changeUserName.bind(this)}
                            />
                        </Form.Item>
                        <Form.Item>
                            <Input
                                prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                type="password"
                                placeholder="Password"
                                // value={this.state.passWord}
                                onChange={this.changePassWord.bind(this)}
                            />
                        </Form.Item>
                        <Form.Item>
                            <Checkbox><Link to="/main">Remember me</Link></Checkbox>
                            <a className="login-form-forgot" href="">
                                Forgot password
                        </a>
                            <Button type="primary" htmlType="submit" loading={this.state.isLoading} onClick={this.login.bind(this)} className="login-form-button">Log in</Button>
                            Or <a href="">register now!</a>
                        </Form.Item>
                    </Form>

                </Content>
                <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
            </Layout>

        );
    }
    //用户名改变
    changeUserName(e){
        console.log('userName',e.target.value)
        this.state.userName=e.target.value
    }
    // 密码改变
    changePassWord(e){
        this.state.passWord=e.target.value
        // const action ={
        //     type:actionT.changeInput,
        //     value:e.target.value
        // }
        // store.dispatch(action)  //传递action
    }
}
export default Login;